<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head lang="en">
	<meta charset="UTF-8">
	<title>超市订单管理系统</title>
	<link type="text/css" rel="stylesheet" href="/static/css/style.css" />
	<link type="text/css" rel="stylesheet" href="/static/css/public.css" />
	<link th:href="@{/bootstrap-3.3.7-dist/css/bootstrap.min.css}" rel="stylesheet">
	<script type="text/javascript" th:src="@{/webjars/jquery/3.3.1/jquery.js}"></script>
	<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"
			integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
			crossorigin="anonymous"></script>
</head>
<div th:replace="head::header"></div>
        <div class="right">
            <div class="location">
                <strong>你现在所在的位置是:</strong>
                <span>用户管理页面</span>
            </div>
            <div class="search">
           		<form method="post" action="/user/findByAdd">
					<input name="method" value="query" class="input-text" type="hidden">
					 <span>用户名：</span>
					 <input name="queryname" class="input-text"	type="text" value="">
					 <span>用户角色：</span>
					<span th:if="${users} ne null">
					 <select name="queryUserRole">
						   <option value="0">--请选择--</option>
						 <span th:each="role :${users}">
						 <option th:value="${role.userRole}"></option>
						 </span>
						</c:if>
	        		</select>
					 </span>
					 <input type="hidden" name="pageIndex" value="1"/>
					 <input	value="查 询" type="submit" id="searchbutton">
					 <a href="/sendToAdd" >添加用户</a>
				</form>
            </div>
            <!--用户-->
            <table class="table table-hover" cellpadding="0" cellspacing="0">
                <tr class="firstTr">
                    <th width="10%">用户编码</th>
                    <th width="10%">用户名称</th>
                    <th width="10%">性别</th>
                    <th width="10%">年龄</th>
                    <th width="10%">电话</th>
                    <th width="10%">用户角色</th>
                    <th width="30%">操作</th>
                </tr>

					<tr th:each="user: ${users}">
						<td>
						<span th:text="${user.userCode}"></span>
						</td>
						<td>
						<span th:text="${user.userName}"></span>
						</td>
						<td>
							<span th:if="${user.gender==1}">
								<span th:text="男"></span>
							</span>
							<span th:if="${user.gender==2}">
								<span th:text="女"></span>
							</span>
						</td>
						<td>
						<span th:text="${user.birthday}"></span>
						</td>
						<td>
						<span th:text="${user.phone}"></span>
						</td>
						<td>
							<span th:text="${user.userRoleName}"></span>
						</td>
						<td>
						<span><a id="viewUser" href="#" data-toggle="modal"
                                 data-target="#myModal"><img src="/static/images/read.png" alt="查看" title="查看"/></a></span>
                            <span><a class="update" th:href="@{/user/user_update(id=${user.id})}" data-toggle="modal"
                                     data-target="#updateModal"><img src="/static/images/xiugai.png" alt="修改" title="修改"/></a></span>
                            <form id="deleteForm" th:action="@{/user/del_user(id=${user.id})}" method="post">
                                <input type="hidden" name="_method" value="DELETE"/>
                            </form>
                            <span><a class="deleteBtn" th:href="@{/user/del_user(id=${user.id})}"><img src="/static/images/schu.png" alt="删除" title="删除"/></a></span>

                        </td>
                        <!-- 查看用户信息模态框（Modal） -->
                        <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                            <div class="modal-dialog">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                                        <h4 class="modal-title" id="myModalLabel">
                                            用户信息
                                        </h4>
                                    </div>
                                    <div class="modal-body">
                                        <div class="col-md-12">
                                            <label>用户编码：</label>
                                            <span id="userCode" th:text="${user.userCode}"></span>
                                        </div>
                                        <div class="col-md-12">
                                            <label>用户名称：</label>
                                            <span  th:text="${user.userName}"></span>
                                        </div>
                                        <div class="col-md-12">
                                            <label>电话：</label>
                                            <span th:text="${user.phone}"></span>
                                        </div>
                                        <div class="col-md-12">
                                            <label>地址：</label>
                                            <span th:text="${user.address}"></span>
                                        </div>
                                        <div class="col-md-12">
                                            <label>创建时间：</label>
                                            <span th:text="${user.creationDate}"></span>
                                        </div>
                                    </div>
                                    <div class="modal-footer">
                                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭
                                        </button>

                                    </div>
                                </div><!-- /.modal-content -->
                            </div><!-- /.modal -->

                        </div>

                        <!-- 修改用户信息模态框（Modal） -->
                        <div class="modal fade" id="updateModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                            <div class="modal-dialog">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                                            &times;
                                        </button>
                                        <h4 class="modal-title" id="updateModalLabel">
                                            修改用户信息
                                        </h4>
                                    </div>
                                    <div class="modal-body">
                                        <form th:action="@{/user/user_update(id=${user.id})}" method="post">
                                            <div class="form-group">
                                                <label>用户编码：</label>
                                                <input class="form-control" th:value="${user.userCode}" name="userCode">
                                            </div>
                                            <div class="form-group">
                                                <label>用户名称：</label>
                                                <input  class="form-control" th:value="${user.userName}" name="userName">
                                            </div>
                                            <div class="form-group">
                                                <label>电话：</label>
                                                <input  class="form-control" th:value="${user.phone}" name="phone">
                                            </div>
                                            <div class="form-group">
                                                <label>地址：</label>
                                                <input class="form-control" th:value="${user.address}" name="address">
                                            </div>
                                            <div class="form-group">
                                                <label>密码：</label>
                                                <input class="form-control" th:value="${user.userPassword}" name="userPassword">
                                            </div>
                                            <div class="modal-footer">
                                                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                                                <button type="submit" class="btn btn-primary" >保存</button>
                                            </div>
                                        </form>
                                    </div>

                                </div>
                                </div><!-- /.modal-content -->
                            </div><!-- /.modal -->

                    </tr>

				</th:forEach>
			</table>
			<!-- 显示分页信息 -->
			<div class="row">
				<!--分页文字信息  -->
				<div class="col-md-6" id="page_info_area">
					当前<span th:text="${pageInfo.pageNum}"></span>页，
					总<span th:text="${pageInfo.pages}"></span>页，
					总<span th:text="${pageInfo.total}"></span>条记录
				</div>
				<!-- 分页条信息 -->
				<div class="col-md-6" id="page_nav_area">
					<ul class="pagination">
						<li><a th:href="@{/user/findAllByPage(pn=${pageInfo.getFirstPage()})}">首页</a></li>
						<li><a th:href="@{/user/findAllByPage(pn=${pageInfo.getPrePage()})}">&laquo;</a></li>
						<li th:each="p : ${pageInfo.navigatepageNums}">
							<a th:text="${p}" th:href="@{/user/findAllByPage(pn=${p})}"> </a>
						</li>
						<li><a th:href="@{/user/findAllByPage(pn=${pageInfo.getLastPage()})}">末页</a></li>
					</ul>
				</div>
			</div>
        </div>
    </section>

<div th:replace="foot::footer"></div>
<script>
    $('.update').click(function () {
        $link =$(this.href);
        alert("显示模态框" + $link);

        $('#updateModal').on(function () {
            //需要异步获取员工数据和部门数据，可以单独封装函数
            $.ajax({
                //请求方式
                type : "POST",
                //请求的媒体类型
                contentType: "application/json;charset=UTF-8",
                //请求地址
                url : $link,
                //数据，json字符串
                //data : JSON.stringify(list),
                //请求成功
                success : function(result) {
                    console.log(result);
                },
                //请求失败，包含具体的错误信息
                error : function(e){
                    console.log(e.status);
                    console.log(e.responseText);
                }
            });
        });
    })
    $(".deleteBtn").click(function() {
        //1.改变表单的action指向
        $("#deleteForm").attr("action",this.href);
        //2.提交表单
        $("#deleteForm").submit();
        return false;
    });
</script>
</html>
